<!-- 
编辑模式切换：避免直接修改原数据，临时变量存储编辑内容，取消编辑可回滚。
完整的状态管理：加载态、错误态、空态全覆盖，用户体验更友好。
交互优化：回车提交编辑、二次确认删除、返回列表按钮，符合用户习惯。
样式适配：响应式设计，在手机和电脑上都能正常显示。 
-->
<script>
  // 1. 引入依赖
  import { onMount } from "svelte";
  //   import { page } from "$app/stores"; // SvelteKit 路由参数（若用纯 Svelte，用 svelte-routing 的 useParams）
  import { navigate } from "svelte-routing"; // 路由跳转（纯 Svelte 用）
  import { toast } from "@zerodevx/svelte-toast"; // 提示弹窗
  import { user } from "../../store/user"; // 用户信息（判断待办归属）
  import { getTodoById, updateTodoAPI, deleteTodoAPI } from "../../api"; // 接口函数
  import axios from "../../utils/axios"; // Axios 实例

  // 2. 定义变量
  let todo = {}; // 存储当前待办详情
  let isLoading = true; // 加载状态
  let errorMsg = ""; // 错误信息
  // 编辑用的临时变量（避免直接修改原数据）
  let editText = "";
  let editDone = false;
  let isEditing = true; // 是否处于编辑状态

  // 3. 获取路由参数（关键：拿到当前待办的 ID）
  // 若用 SvelteKit：从 page.params 取（路由配置如 /todo/[todoId]）
  //   const todoId = $page.params.todoId;
  // 若用纯 Svelte + svelte-routing：用 useParams 取
  export let id;

  // 4. 加载待办详情（页面挂载时执行）
  onMount(async () => {
    try {
      isLoading = true;
      // 调用接口获取单个待办详情（需后端支持 /todos/:id 接口）
      const res = await getTodoById(id);
      function sleep(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }
      //   await sleep(3000); // 模拟网络延迟
      // 校验接口返回（确保是正确格式）
      if (res.code === 200 && res.data) {
        todo = res.data;
        // 初始化编辑变量（同步待办当前值）
        editText = todo.text;
        editDone = todo.done;
      } else {
        throw new Error(res?.message || "获取待办详情失败");
      }
    } catch (err) {
      // 错误处理（区分网络错误和业务错误）
      errorMsg =
        err?.response?.data?.message || err?.message || "加载失败，请重试";
      toast.push(errorMsg);
      console.error("加载待办详情失败：", err);
    } finally {
      isLoading = false; // 无论成功失败，都结束加载
    }
  });

  // 5. 切换编辑状态（开始编辑/取消编辑）
  function toggleEdit() {
    if (isEditing) {
      // 取消编辑：重置临时变量为原数据
      editText = todo.text;
      editDone = todo.done;
    }
    isEditing = !isEditing;
  }

  // 6. 提交编辑（修改待办）
  async function submitEdit() {
    if (!editText.trim()) {
      // 校验：内容不能为空
      toast.push("待办内容不能为空");
      return;
    }

    try {
      // 调用更新接口（传递修改后的数据）
      const updateData = {
        text: editText,
        done: editDone,
      };
      const res = await updateTodoAPI(id, updateData);

      if (res?.code === 200) {
        // 编辑成功：更新原数据 + 退出编辑状态
        todo.text = editText;
        todo.done = editDone;
        isEditing = false;
        toast.push("待办更新成功");
      } else {
        throw new Error(res?.message || "更新待办失败");
      }
    } catch (err) {
      errorMsg = err?.response?.message || err?.message || "更新失败";
      toast.push(errorMsg);
      console.error("更新待办失败：", err);
    }
  }

  // 7. 删除待办
  async function deleteTodo() {
    if (!confirm("确定要删除这个待办吗？删除后无法恢复")) {
      // 二次确认
      return;
    }

    try {
      const res = await deleteTodoAPI(id);
      if (res?.code === 200) {
        toast.push("待办删除成功");
        // 删除后跳回列表页（路由根据你的项目配置调整，如 /todos）
        navigate("/todos");
      } else {
        throw new Error(res?.message || "删除待办失败");
      }
    } catch (err) {
      toast.push(err?.response?.data?.message || "删除失败");
      console.error("删除待办失败：", err);
    }
  }

  // 8. 返回列表页
  function goBack() {
    navigate("/todos"); // 路由根据你的项目配置调整
  }
</script>

<!-- 页面结构：加载态 → 错误态 → 详情内容 -->
<div class="todo-detail-container">
  <!-- 顶部导航栏 -->
  <div class="header text-2xl">
    <button
      on:click={goBack}
      class="bg-blue-500 text-blue-50 hover:bg-blue-700 hover:text-white rounded-md dark:bg-gray-700 dark:hover:bg-gray-600
      px-4 py-2 text-sm"
    >
      <i class="fas fa-arrow-left" /></button
    >
    <h1>待办详情</h1>
  </div>

  <!-- 加载中状态 -->
  {#if isLoading}
    <div class="text-center py-8">
      <i class="fas fa-spinner fa-spin text-2xl text-gray-500"></i>
      <p class="mt-2 text-gray-500 dark:text-gray-400">加载中...</p>
    </div>
  {:else if errorMsg}
    <div
      class="bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded mb-4"
    >
      <i class="fas fa-exclamation-circle mr-2"></i>{errorMsg}
    </div>
  {:else if todo}
    <!-- 待办详情内容 -->
    <div class=" text-gray-800 dark:text-gray-200 mb-4 rounded todo-card">
      <!-- 待办内容（编辑/查看模式切换） -->
      <div class="todo-content">
        {#if isEditing}
          <!-- 编辑模式：输入框 -->
          <input
            type="text"
            bind:value={editText}
            class="edit-input dark:bg-gray-500 dark:text-gray-200 dark:border dark:border-gray-600"
            placeholder="请输入待办内容"
            on:keydown={(e) => e.key === "Enter" && submitEdit()}
          />
        {:else}
          <!-- 查看模式：纯文本（完成状态加删除线） -->
          <p class:active={todo.done}>{todo.text}</p>
        {/if}
      </div>

      <!-- 待办状态（完成/未完成） -->
      <div class="todo-status">
        <label>
          {#if isEditing}
            <!-- 编辑模式：复选框可修改 -->
            <input
              type="checkbox"
              bind:checked={editDone}
              class="status-checkbox"
            />
          {:else}
            <!-- 查看模式：复选框不可修改 -->
            <input
              type="checkbox"
              checked={todo.done}
              disabled
              class="status-checkbox"
            />
          {/if}
          <span>{todo.done ? "已完成" : "未完成"}</span>
        </label>
      </div>

      <!-- 额外信息（若数据库有创建时间/用户ID，可展示） -->
      <div class="todo-meta">
        {#if todo.created_at}
          <p>创建时间：{new Date(todo.created_at).toLocaleString()}</p>
        {/if}
        <p>关联用户ID：{todo.userId}</p>
      </div>

      <!-- 操作按钮（编辑/提交/删除） -->
      <div class="todo-actions">
        {#if isEditing}
          <button on:click={submitEdit} class="btn confirm-btn">确认修改</button
          >
          <button on:click={toggleEdit} class="btn cancel-btn">取消</button>
        {:else}
          <button on:click={toggleEdit} class="btn edit-btn">编辑待办</button>
          <button on:click={deleteTodo} class="btn delete-btn">删除待办</button>
        {/if}
      </div>
    </div>
  {:else}
    <!-- 待办不存在 -->
    <div class="empty">该待办不存在或已被删除</div>
  {/if}
</div>

<!-- 样式：按需调整，适配你的项目风格 -->
<style>
  .todo-detail-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
  }

  .back-btn {
    padding: 8px 16px;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    /* background-color: #fff; */
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .back-btn:hover {
    /* background-color: #f5f5f5; */
  }

  .loading,
  .error,
  .empty {
    text-align: center;
    padding: 50px 0;
    color: #666;
  }

  .todo-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 24px;
  }
  :global(.dark) .todo-card {
    border-radius: 8px;
    /* border: 1px solid rgb(250, 249, 249); */
    box-shadow: 0 2px 8px rgba(155, 154, 154, 0.3);
  }

  .todo-content {
    margin-bottom: 20px;
  }

  .todo-content p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
  }

  .todo-content p.active {
    text-decoration: line-through;
    color: #999;
  }

  .edit-input {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .edit-input:focus,
  .edit-input:focus-visible {
    border: 1px solid rgb(146, 146, 146);
    outline: none;
  }
  :global(.dark) .edit-input {
    /* background-color: #ddd; */
  }

  .todo-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #666;
  }

  .status-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .todo-meta {
    margin-bottom: 24px;
    color: #999;
    font-size: 14px;
  }

  .todo-meta p {
    margin: 4px 0;
  }

  .todo-actions {
    display: flex;
    gap: 12px;
  }

  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
  }

  .edit-btn {
    background: #409eff;
    color: #fff;
  }

  .delete-btn {
    background: #f56c6c;
    color: #fff;
  }

  .confirm-btn {
    background: #67c23a;
    color: #fff;
  }

  .cancel-btn {
    background: #909399;
    color: #fff;
  }

  .btn:hover {
    opacity: 0.9;
  }
</style>
